<template>
	<page>
		<!-- #ifndef MP-ALIPAY -->
		<u-navbar title="海报分享"></u-navbar>
		<!-- #endif -->

		<!-- 生成海报 -->
		<canvas canvas-id="poster" class="poster_canvas"></canvas>
		<!-- 生成分享图 -->
		<canvas canvas-id="share-cover" class="poster_canvas"></canvas>
		<!-- 分享海报组件 -->
		<share-poster
			:posterUrl="posterUrl"
			:showPoster="showPoster"
			:appShare="appShare"
			:posterStyle="posterStyle"
			@close="$mUtils.back()"
		></share-poster>
	</page>
</template>

<script setup lang="ts">
import { mpShare } from '@/api/share'
import $mUtils from '@/common/utils'
import SharePoster from '@/components/share-poster/share-poster.vue'

interface AppShare {
	path: string
	title: string
	imageUrl: string
	query?: {
		goods_id: number
	}
}

function getRandomInt(min: number, max: number) {
	min = Math.ceil(min) // 确保最小值是一个整数
	max = Math.floor(max) // 确保最大值是一个整数
	return Math.floor(Math.random() * (max - min + 1)) + min
}

/**
 * 计算从指定基年到目标日期的月份差、延迟月份、未来的日期和年龄。
 *
 * @param {number} baseYear - 基准年份（例如1965年）。
 * @param {number} maxDelayMonths - 延迟月份的最大值（例如36个月）。
 * @param {number} delayDivisor - 用于计算延迟月份的除数（例如4）。
 * @param {number} ageAtBaseYear - 基准年份的年龄（例如60岁）。
 * @param {number} year - 目标年份。
 * @param {number} month - 目标月份。
 * @returns {Object} - 包含以下属性的对象：
 *   - totalMonths: 从基准年份到目标日期的总月份差。
 *   - delayMonths: 根据计算得出的延迟月份。
 *   - futureYear: 六十年后的年份。
 *   - futureMonth: 六十年后的月份。
 *   - futureAgeYear: 六十年后加上延迟月份转换后的年龄（年）。
 *   - futureAgeMonth: 六十年后加上延迟月份转换后的年龄（月）。
 */
function calculateDelayMonthsAndAge(
	baseYear: number,
	maxDelayMonths: number,
	delayDivisor: number,
	ageAtBaseYear: number,
	year: number,
	month: number
) {
	const baseMonth = 1 // 基准月份，1965年1月

	// 计算从基准年份到目标日期的年份差和月份差
	const yearDifference = year - baseYear
	const monthDifference = month - baseMonth

	// 计算从基准年份到目标日期的总月份
	const totalMonths = yearDifference * 12 + monthDifference

	// 计算延迟月份
	let delayMonths = Math.floor((totalMonths + 1) / delayDivisor) + 1 // 加1后除以给定的除数

	// 如果延迟月份超过最大限制，则将其设置为最大限制
	if (delayMonths > maxDelayMonths) {
		delayMonths = maxDelayMonths
	}
	if (delayMonths < 0) {
		delayMonths = 0
	}

	// 计算未来的总月份
	const futureTotalMonths = totalMonths + ageAtBaseYear * 12 + delayMonths // 加上60年的月份和延迟月份

	// 计算未来的年份和月份
	const futureYear = baseYear + Math.floor(futureTotalMonths / 12)
	const futureMonth = ((baseMonth + (futureTotalMonths % 12) - 1) % 12) + 1 // 处理月份，确保在1-12范围内

	// 计算未来的年龄
	const additionalYears = Math.floor(delayMonths / 12) // 从延迟月份计算额外的年份
	const additionalMonths = delayMonths % 12 // 从延迟月份计算剩余的月份
	const futureAgeYear = ageAtBaseYear + additionalYears // 基础年龄加上额外的年份
	const futureAgeMonth = additionalMonths // 剩余的月份

	// 返回包含计算结果的对象
	return {
		totalMonths,
		delayMonths,
		futureYear,
		futureMonth,
		futureAgeYear,
		futureAgeMonth
	}
}

// 人员类型
const current = ref(0)
// 出生年月
const birthday = ref([])
// 海报图列表
const posterList = ref([
	$mUtils.qiniu('Fl7riqDvMahN9tzJ92g41URJ5u0X'),
	$mUtils.qiniu('FlD5IESZNlQk_FPfIConFBWhllhJ'),
	$mUtils.qiniu('Fi7u6aH7s04H8TYayJiJD1OCA124')
])
// 海报图
const posterUrl = ref<string>('')
// 显示海报
const showPoster = ref<boolean>(false)
// APP分享
const appShare: AppShare = reactive({
	title: '点击获取您的法定退休时间',
	imageUrl: posterList.value[getRandomInt(0, 2)],
	path: 'pages/index/index'
})
// 海报样式
const posterStyle: object = {
	width: '600rpx',
	height: '1000rpx',
	marginTop: '-580rpx',
	marginLeft: '-300rpx'
}

// 创建封面
function createCover() {
	const pixelRatio = wx.getSystemInfoSync().pixelRatio

	// 绘制背景
	const ctx = uni.createCanvasContext('share-cover')
	ctx.setFillStyle('#04e3ce')
	ctx.fillRect(0, 0, 300, 300)

	// 绘制商品主图
	ctx.drawImage(
		posterUrl.value,
		0,
		110 * pixelRatio,
		300 * pixelRatio,
		300 * pixelRatio,
		0,
		0,
		300,
		300
	)

	ctx.draw(true, () => {
		// canvas画布转成图片并返回图片地址
		uni.canvasToTempFilePath({
			canvasId: 'share-cover',
			width: 300,
			height: 300,
			success: res => {
				// 海报路径
				appShare.imageUrl = res.tempFilePath
			},
			fail: () => {
				// 海报制作失败
				$mUtils.tip('海报制作失败，图片下载失败')
			}
		})
	})
}

// 创建海报
async function createPoster() {
	if (posterUrl.value) {
		showPoster.value = true
		return
	}

	uni.showLoading({
		mask: true,
		title: '绘制中...'
	})

	// 下载商品主图
	let goodsImage: any = await $mUtils.downloadFile(appShare.imageUrl)

	// 绘制背景
	const ctx = uni.createCanvasContext('poster')
	ctx.setFillStyle('#04e3ce')
	ctx.fillRect(0, 0, 300, 500)
	ctx.lineJoin = 'round'
	ctx.strokeStyle = '#04e3ce'
	ctx.strokeRect(0, 0, 300, 500)

	// 绘制商品主图
	ctx.drawImage(goodsImage, 0, 0, 300, 500)

	// 绘制商品价格
	ctx.setFontSize(13) // 文字样式
	// 设置加粗字体样式
	ctx.font = 'bold 13px Arial'
	ctx.setFillStyle('#fff') // 文字样式
	ctx.fillText('您的改革后法定退休年龄为：', 74, 320) // 文字样式
	ctx.fillText('您的改革后退休时间为：', 30, 350) // 文字样式
	ctx.fillText('您的延迟月数为：', 110, 382) // 文字样式

	// 年龄
	let age: any = ''
	// 时间
	let date: any = ''
	// 月数
	let month: any = ''

	if (current.value == 0) {
		let res = calculateDelayMonthsAndAge(
			1965,
			36,
			4,
			60,
			Number(birthday.value[0]),
			Number(birthday.value[1])
		)
		month = `${res.delayMonths}个月`
		age = res.futureAgeYear
		date = `${res.futureYear}年${res.futureMonth}月`
	} else if (current.value == 1) {
		/**
		 * 原法定退休年龄55周岁女职工（女干部）
		 * 退休年龄计算公式为:退休年龄=55+3x((55+出生年份-当前年份)/12)
		 * 同样以1980年出生的女干部为例，其退休年龄计算为:55+3x((55 +1980-2021)/12)=58.5岁
		 */
		let res = calculateDelayMonthsAndAge(
			1970,
			36,
			4,
			55,
			Number(birthday.value[0]),
			Number(birthday.value[1])
		)
		month = `${res.delayMonths}个月`
		age = res.futureAgeYear
		date = `${res.futureYear}年${res.futureMonth}月`
	} else if (current.value == 2) {
		/**
		 * 原法定退休年龄50周岁女职工（女职工）
		 * 退休年龄计算公式为:退休年龄=50+3x((50+出生年份-当前年份)/12)
		 * 例如，1980年出生的女职工，其退休年龄计算为:50+3x((50+1980-2021)/12)=52.25岁
		 */
		let res = calculateDelayMonthsAndAge(
			1975,
			60,
			2,
			50,
			Number(birthday.value[0]),
			Number(birthday.value[1])
		)
		month = `${res.delayMonths}个月`
		age = res.futureAgeYear
		date = `${res.futureYear}年${res.futureMonth}月`
	}
	ctx.font = 'bold 16px Arial'
	ctx.fillText(`${age}岁`, 235, 320) // 文字样式
	ctx.fillText(date, 166, 352) // 文字样式
	ctx.fillText(month, 206, 383) // 文字样式

	ctx.draw(true, () => {
		// canvas画布转成图片并返回图片地址
		uni.canvasToTempFilePath({
			canvasId: 'poster',
			width: 300,
			height: 500,
			success: res => {
				// 隐藏Loading
				uni.hideLoading()
				// 显示海报
				showPoster.value = true
				// 海报路径
				posterUrl.value = res.tempFilePath
				// 绘制封面
				createCover()
			},
			fail: () => {
				// 海报制作失败
				$mUtils.tip('海报制作失败，图片下载失败')
			}
		})
	})
}

onShareAppMessage(() => {
	return mpShare(appShare)
})

onShareTimeline(() => {
	return mpShare(appShare)
})

onUnload(() => {
	uni.hideLoading()
})

onLoad((options: any) => {
	const codeScene = uni.getStorageSync('codeScene')
	if (codeScene.scene == 1155) {
		uni.removeStorageSync('codeScene')
		return $mUtils.replaceAll('/pages/index/index')
	}
	// 人员类型
	current.value = options.current
	// 出生年月
	birthday.value = options.birthday.split('-')
	// 创建海报并显示
	createPoster()
})
</script>

<style lang="scss" scoped>
.poster_canvas {
	width: 750rpx;
	height: 1334rpx;
	position: fixed;
	top: -10000rpx;
	left: 0rpx;
	opacity: 0;
}
</style>
